<template>
  <div class="minaddBxo" v-loading="loading">
      <el-form label-width="120px" label-position="top" :model="addForm" ref="addForm">
            <el-form-item label="担保机构：" prop="guaranteeAgency" :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-select size="small" v-model="addForm.guaranteeAgency" placeholder="请选择担保机构" @change="onChange">
                  <el-option v-for="item in asTypeArr" :label="item.name" :value="item.value" :key="item.value"></el-option>
              </el-select>
              <div v-if="addForm.guaranteeAgency" class="el-form-item__label">
                <!-- <p>{{ asTypeArr[addForm.guaranteeAgency-1].add }}</p>  -->
                担保机构AUSD余额:&nbsp;&nbsp;&nbsp;{{ number }}
                </div>
            </el-form-item>
            

          <el-form-item label="担保金额：" prop="guaranteeAmount" :rules="{required: true, message: '担保金额不能为空', trigger: 'blur'}">
              <el-input size="small" type="number" v-model="addForm.guaranteeAmount" auto-complete="off" placeholder="请输入担保金额"></el-input>
          </el-form-item>

          
            <el-form-item label="担保交易时限(不迟于)：" prop="guaranteeEndTime" :rules="{required: true, message: '时限不能为空', trigger: 'blur'}">
                <el-date-picker
                v-model="addForm.guaranteeEndTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="选择区块链：" prop="chain" :rules="{required: true, message: '请选择区块链', trigger: 'blur'}">
              <el-select size="small" v-model="addForm.chain" placeholder="请选择区块链">
                  <el-option v-for="item in ChainTypeArr" :label="item.name" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          
      </el-form>

      <div class="minaddBxo-footer">
          <button @click="submitForm('addForm')">创建担保交易智能合约</button>
      </div>
  </div>
</template>

<script>

import Web3 from 'web3'
import { AUSDConfirm,GetContractResult } from '../../../api/userMG'
import usdtAbi from './usdt.json'

export default {
    props: ['name','swapId'],
data() {
  return {
    loading:false,
    number:'',
    addForm: {
        "swapId": this.swapId,
        "guaranteeAgency": "",
        "guaranteeAmount": "",
        "guaranteeEndTime": "",
        "chain": ""
    },

    asTypeArr:[
        {name:'A',add:'0x5aFA7e7E6844740c73ea9B0fEa413f49d1149481',value:'1'},
        {name:'B',add:'0x5aFA7e7E6844740c73ea9B0fEa413f49d1149481',value:'2'},
        {name:'C',add:'0x5aFA7e7E6844740c73ea9B0fEa413f49d1149481',value:'3'},
    ],
    AusdAdd:'0x29e9D989a5fdfD705045Dd29FeEB2439aD99637A',
    ChainTypeArr:[
        {name:'DiBase Chain',value:'1'},
        {name:'Ethereum',value:'2'},
        {name:'Polygon',value:'3'},
    ],
    
  }
},

methods: {
  submitForm(formName){
      this.$refs[formName].validate(valid => {
          if (valid) {
              this.loading = true;
              AUSDConfirm(this.addForm).then(res => {
                  if (res.code != 0) {
                        this.loading = false;
                        this.$message({
                            type: 'info',
                            message: res.message
                        })
                  } else {
                    this.onInit()
                  }
              })
          }
      })
      return
  },
  onInit(){
    GetContractResult({swapId:this.swapId}).then(res => {
        if (res && res.code != 0) {
            let timer = setTimeout(()=>{
                    clearTimeout(timer)
                    this.onInit()   
                },3000)
        } else {
            this.loading = false;
            this.$emit('onNext',this.name)
        }
        }).catch(()=>{
            let timer = setTimeout(()=>{
                clearTimeout(timer)
                this.onInit()
            },3000)
        })
    
  },
  async onChange(ev){
    // alert(1)
    console.log(ev)
    this.number = '--'
    let myadd = this.asTypeArr[ev-1].add
    let web3js = new Web3('https://ethereum-goerli.publicnode.com');
    window.web3js = web3js
    console.log(web3js)
    let usdtCoin = new web3js.eth.Contract(usdtAbi,this.AusdAdd);
    let balance = await usdtCoin.methods.balanceOf(myadd).call()
    // debugger
    if(balance){
        //  = balance
         this.number = (parseInt(balance)/Math.pow(10,6)).toFixed(6)
    }
    
  }
}
}
</script>

<style scoped>
  .ipt_div{
      text-align: center;
      border: 1px solid #DCDFE6;
      border-radius: 4px;
      height: 40px;
  }
  .minaddBxo{
      width: 900px;
      margin: 0 auto;
  }
  .minaddBxo .el-select{
      width: 100%;
  }
  .el-date-editor.el-input{
    width: 100%;
  }
  .minaddBxo /deep/ .el-form-item__label{
      padding: 0 !important;
  }

  .minaddBxo /deep/ .el-input__inner{
      line-height: 40px;
      height: 40px;
      text-align: center;
  }
  .minaddBxo-footer button{
      background:#1C1E22;
      color: #fff;
      border-radius: 30px;
      width: 300px;
      border:0;
      line-height: 46px;
      font-size: 16px;
      margin: 50px auto 100px;
      display: block;
      cursor: pointer;
  }
</style>